<template>
	<view class="container">

		<u-button @click="upload">选取图片</u-button>
		<view class="mainContent" v-show="state">
			
			<view class="imgBox">
				<image :src="res.coverURL"></image>
			</view>
			
			<view class="infoBox">
				<text class="title">简介:</text>{{res.desc}}
			</view>
			<view class="infoBox">
				<text class="title">宠物类型:</text>{{res.pettype}}
			</view>
			<view class="infoBox">
				<text class="title">中文名:</text>{{res.name}}
			</view>
			<view class="infoBox">
				<text class="title">英文名:</text>{{res.engName}}
			</view>
			<view class="infoBox">
				<text class="title">性格特点:</text>{{res.characters}}
			</view>
			<view class="infoBox">
				<text class="title">祖籍:</text>{{res.nation}}
			</view>
			<view class="infoBox">
				<text class="title">易患疾病:</text>{{res.easyOfDisease}}
			</view>
			<view class="infoBox">
				<text class="title">寿命:</text>{{res.life}}
			</view>
			<view class="infoBox">
				<text class="title">体态特征:</text>{{res.feature}}
			</view>
			<view class="infoBox">
				<text class="title">特点:</text>{{res.characterFeature}}
			</view>
			<view class="infoBox">
				<text class="title">照顾须知:</text>{{res.careKnowledge}}
			</view>
			<view class="infoBox">
				<text class="title">喂养注意:</text>{{res.feedPoints}}
			</view>
			<view class="infoBox">
				<text class="title">可信度:</text>{{res.trust}}
			</view>
			<view class="infoBox">
				<text class="title">价格:</text>{{res.price}}
			</view>
			
		</view>
		<view class="empty">
			<u-empty text="暂无数据" mode="data" v-show="!state"></u-empty>
		</view>
		<u-tabbar :list='this.$store.state.list' active-color='#2b85e4'></u-tabbar>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'

	export default {
		data() {
			return {

				res:{},
				state:false
			}
		},
		methods: {
			upload() {

				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], 
					sourceType: ['album', 'camera'], 
					success: (res) => {
						pathToBase64(res.tempFilePaths[0]).then((base64) => {
							uni.request({
								url: 'http://api.tianapi.com/txapi/scanpet/index',
								method: 'POST',
								header: {
									'content-type': 'application/x-www-form-urlencoded'
								},
								data: {
									key: '28b32572f6d02258d413b5b1a7f467cf',
									img: base64
								},
								success: (res) => {
									this.res = res.data.newslist[0]
									this.state=true
									console.log(this.res);
								}
							})
							
							// uni.request({
							// 	url: 'http://dongwu.market.alicloudapi.com/do',
							// 	method: 'POST',
							// 	header: {
							// 		'content-type': 'application/x-www-form-urlencoded',
							// 		'Authorization':'APPCODE ed7dff0af8654cdca55475adc09be6a9'
							// 	},
							// 	data: {
							// 		appcode: 'ed7dff0af8654cdca55475adc09be6a9',
							// 		image: base64,
							// 		baike:6,
							// 		num:6
							// 	},
							// 	success: (res) => {
							// 		console.log(res);
							// 	}
							// })
							
							
							
						})
					}
				})


			}
		},
		computed: {

			hadGet() {
				return this.res ?? true
			}
		}
	}
</script>

<style scoped lang="less">
	@infoBackColor:rgba(255,255,255,.7);
	.container {
		padding: 20rpx;
	.mainContent{
		.imgBox{margin: 30rpx 0;
			image{
				width:100%;
				
			}
		}
		.infoBox {
			line-height: 2em;
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			background-color: @infoBackColor;
		
			.title {
				font-size: 30rpx;
				font-weight: bold;
			}
		}
	}
	.empty{
		margin-top: 500rpx;
	}
	}
</style>
